<template>
    <a-card :title="$t('Details')">
        <a-row :gutter='8'>
            <a-col style="padding: 14px" :xs='24' :sm='24' :md='24' :lg='12' :xl='12' :xxl='12'>
                <p style="color:var(--themeColor)" class="tabs-top-title">{{ $t('Service-process') }}{{ $t('Status') }}</p>
                <a-table :columns='sscolumns' :dataSource='tarname.ranks' size='small' :pagination='pagination' rowKey='mds'
                    :locale="defaultSetting"></a-table>
                <!-- :rowSelection='{type:"radio",selectedRow:selectedRowKeys,onChange:onSelectChange}'  -->
            </a-col>
            <a-col style="padding: 14px" :xs='24' :sm='24' :md='24' :lg='12' :xl='12' :xxl='12'>
                <p style="color:var(--themeColor)" class="tabs-top-title">{{ $t('Pool') }}</p>
                <a-table :columns='pcolumns' :dataSource='tarname.pools' size='small' :pagination='pagination' rowKey='pool'
                    :locale="defaultSetting">
                    <template slot="Operate" slot-scope="text, record, index">
                        <a-tooltip placement='bottom' v-userAuth="'D10-2'">
                            <template slot='title'>
                                <span>{{ $t('Disassociate') }}</span>
                            </template>
                            <a-button type='primary' size="small" icon='link' @click="cancelConnect(record)"></a-button>
                        </a-tooltip>
                    </template>
                </a-table>
            </a-col>
        </a-row>
        <a-row style='margin-top:1rem'>
            <div id='inodes'></div>
        </a-row>
    </a-card>
</template>
<script>
// import G2 from '@antv/g2'
import DataSet from '@antv/data-set'
import EmptyData from '@/components/common/EmptyData'
import request from '@/request/request'

export default {
    name: 'Detail',
    props: ['tarname', 'chartdata'],
    components: { EmptyData },
    data() {
        return {
            chart: '',
            sscolumns: [
                { title: this.$t('Rank'), dataIndex: 'rank', key: 'rank', ellipsis: true, sorter: (a, b) => a.rank.length - b.rank.length },
                { title: this.$t('Status'), dataIndex: 'state', key: 'state', ellipsis: true },
                { title: this.$t('Guard-process'), dataIndex: 'mds', key: 'mds', ellipsis: true },
                { title: this.$t('Activity'), dataIndex: 'activity', key: 'activity', ellipsis: true },
                { title: this.$t('Caching'), dataIndex: 'dns', key: 'dns', ellipsis: true },
                { title: this.$t('File-index'), dataIndex: 'inos', key: 'inos', ellipsis: true }
            ],
            pcolumns: [
                { title: this.$t('Pool') + this.$t('Name'), dataIndex: 'pool', key: 'pool', ellipsis: true, sorter: (a, b) => a.pool.length - b.pool.length },
                { title: this.$t('Type'), dataIndex: 'type', key: 'type', ellipsis: true },
                { title: this.$t('Capacity'), dataIndex: 'avail', key: 'avail', ellipsis: true },
                // {title: this.$t('Usage-rate'),dataIndex:'usage',key:'usage'}
                { title: this.$t('Usage-rate'), dataIndex: 'used', key: 'used', ellipsis: true },
                { title: this.$t('Operate'), key: 'Operate', width: 100, scopedSlots: { customRender: 'Operate' } },
            ],
            pagination: {
                defaultPageSize: 3,
                showTotal: total => `${this.$t('A-total-of')} ${total} ${this.$t('Data')}`,
                showSizeChanger: true,
                pageSizeOptions: ['3', '5', '10', '15'],
                onShowSizeChange: (current, pageSize) => this.pageSize = pageSize,
                buildOptionText: (props) => `${props.value} / ${this.$t('page')}`
            },
            selectedRowKeys: [],
            inodedata: [],
            defaultSetting: { emptyText: <EmptyData /> }
        }
    },
    computed: {
        getlanguage() {
            return this.$store.state.language
        }
    },
    watch: {
        // flag(val){
        //     this.getdata()
        // },
        getlanguage(val) {
            this.sscolumns = [
                { title: this.$t('Rank'), dataIndex: 'rank', key: 'rank', ellipsis: true, sorter: (a, b) => a.name.length - b.name.length },
                { title: this.$t('Status'), dataIndex: 'state', key: 'state', ellipsis: true },
                { title: this.$t('Guard-process'), dataIndex: 'mds', key: 'mds', ellipsis: true },
                { title: this.$t('Activity'), dataIndex: 'activity', key: 'activity', ellipsis: true },
                { title: this.$t('Caching'), dataIndex: 'dns', key: 'dns', ellipsis: true },
                { title: this.$t('File-index'), dataIndex: 'inos', key: 'inos', ellipsis: true }
            ]
            this.pcolumns = [
                { title: this.$t('Pool') + this.$t('Name'), dataIndex: 'pool', key: 'pool', ellipsis: true, sorter: (a, b) => a.name.length - b.name.length },
                { title: this.$t('Type'), dataIndex: 'type', key: 'type', ellipsis: true },
                { title: this.$t('Capacity'), dataIndex: 'avail', key: 'avail', ellipsis: true },
                // {title: this.$t('Usage-rate'),dataIndex:'usage',key:'usage'}
                { title: this.$t('Usage-rate'), dataIndex: 'used', key: 'used', ellipsis: true },
                { title: this.$t('Operate'), key: 'Operate', width: 100, scopedSlots: { customRender: 'Operate' } },
            ]
        },
    },
    mounted() {
        // this.drawindes()
        // //再初始化之后调整图表的大小自适应
        // const e = document.createEvent('Event')
        // e.initEvent('resize', true, true)
        // window.dispatchEvent(e)
        // this.onSelectChange('node2')
    },
    methods: {
        onSelectChange(selectedRowKeys) {
            this.inodedata = []
            for (const item of this.chartdata) {
                if (selectedRowKeys == item.daemon) {
                    this.inodedata = item.data
                }
            }
            this.drawindes()
            this.selectedRowKeys = selectedRowKeys
        },
        drawindes() {
            if (this.chart) {     // 如果存在的话就删除图表再重新生成
                this.chart.destroy()
            }
            this.chart = new G2.Chart({
                container: 'inodes',
                forceFit: true,
                height: 300,
                padding: [25, 30, 28, 40]
            });
            let ds = new DataSet();
            let dv = ds.createView().source(this.inodedata);
            dv.transform({
                type: 'filter',
            })
            this.chart.source(dv, {
                timeindex: {
                    type: 'time',
                    tickCount: 8,
                    mask: 'hh:MM:ss'
                },
                inodes: {
                    alias: 'mds_inodes:'
                },
                handles: {
                    alias: 'mds_server.handle_client_request:'
                }
            });
            this.chart.axis('inodes', {
                grid: null
            });
            this.chart.axis('handles', {
                title: true
            });
            this.chart.legend({
                custom: true,
                position: 'top-right',
                items: [{
                    value: 'inodes',
                    marker: {
                        symbol: 'circle',
                        fill: 'l(100) 0:#FFD6E4 1:#FC0752',
                        radius: 5
                    }
                }, {
                    value: 'handles',
                    marker: {
                        symbol: 'circle',
                        fill: 'l(100) 0:#CDE7FE 1:#0785FD',
                        radius: 5
                    }
                }]
            });
            this.chart.area().position('timeindex*inodes').color('l(100) 0:#FFD6E4 1:#FC0752').opacity(0.85)
            this.chart.area().position('timeindex*handles').color('l(100) 0:#CDE7FE 1:#0785FD').opacity(0.85)
            this.chart.render()
        },
        //取消存储池关联
        cancelConnect(row) {
            // console.log('row',row)
            let _this = this;
            this.$confirm({
                title: `${this.$t('Sure-disassociate')}：${row.pool}?`,
                okText: this.$t('Sure'),
                okType: 'danger',
                cancelText: this.$t('Cancel'),
                onOk() {
                    // _this.$axios({
                    //   method: 'post',
                    //   url: _this.allurl+'cephfs/operation/rmDataPool',
                    //   data: {
                    //     pool_name: row.pool
                    //   }
                    // })
                    request('post', 'cephfs/operation/rmDataPool', {
                        pool_name: row.pool
                    })
                        .then(res => {
                            // console.log('取消关联', res)
                            if (res.data.flag == 0) {
                                _this.$emit('updateData');
                            }
                            _this.model(res.data.id) //返回模板
                            _this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
                            // _this.gettask()  //任务栏信息
                        })
                },
                onCancel() {
                }
            })
        },
    }
}
</script>

<style scoped>
::v-deep .ant-card-head {
    padding: 0 !important;
}
</style>
